<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'/>
  <title>mapbox wind</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: #202020;
    }
  </style>
</head>
<body>
<div id='map'></div>
<script src="../packages/mapbox-gl/dist/mapbox-wind.js"></script>
<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
  const map = new mapboxgl.Map({
    container: 'map',
    style: {
      version: 8,
      sources: {
        carto: {
          type: 'raster',
          tiles: [
            '//a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
            '//b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
            '//c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
            '//d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
          ],
          tileSize: 256,
          // minzoom: 1,
          // maxzoom: 18,
        },
      },
      layers: [
        {
          id: 'carto',
          type: 'raster',
          source: 'carto',
          // minzoom: 1,
          // maxzoom: 22,
          paint: {
            'raster-resampling': 'nearest',
            'raster-fade-duration': 0,
          },
        },
        {
          id: 'background',
          type: 'background',
          layout: {
            visibility: 'none',
          },
        },
      ],
    },
    center: [113.53450137499999, 34.44104525],
    zoom: 4
  });

  const data = {
    "min": -50.84996643066404,
    "max": 42.25002441406252,
  };

  const color = {
    temp: [[203,[115,70,105,255]],
      [218,[202,172,195,255]],
      [233,[162,70,145,255]],
      [248,[143,89,169,255]],
      [258,[157,219,217,255]],
      [265,[106,191,181,255]],
      [269,[100,166,189,255]],
      [273.15,[93,133,198,255]],
      [274,[68,125,99,255]],
      [283,[128,147,24,255]],
      [294,[243,183,4,255]],
      [303,[232,83,25,255]],
      [320,[71,14,0,255]]],
    wind: [
      [0,[98,113,183,255]],
      [1,[57,97,159,255]],
      [3,[74,148,169,255]],
      [5,[77,141,123,255]],
      [7,[83,165,83,255]],
      [9,[53,159,53,255]],
      [11,[167,157,81,255]],
      [13,[159,127,58,255]],
      [15,[161,108,92,255]],
      [17,[129,58,78,255]],
      [19,[175,80,136,255]],
      [21,[117,74,147,255]],
      [24,[109,97,163,255]],
      [27,[68,105,141,255]],
      [29,[92,144,152,255]],
      [36,[125,68,165,255]],
      [46,[231,215,215,255]],
      [51,[219,212,135,255]],
      [77,[205,202,112,255]],
      [104,[128,128,128,255]]
    ],
  };

  const windInterpolateColor = color.wind.reduce((result, item, key) => result.concat(item[0], 'rgba(' + item[1].join(',') + ')'), []);
  const tempInterpolateColor = color.temp.reduce((result, item, key) => result.concat(item[0] - 273.15, 'rgba(' + item[1].join(',') + ')'), []);

  const cv = document.createElement('canvas');
  cv.width = 256;
  cv.height = 1;
  // const range = data.max - data.min;
  const range = (tempInterpolateColor[tempInterpolateColor.length - 2] - tempInterpolateColor[0]);
  const ctx = cv.getContext('2d');

  const gradient = ctx.createLinearGradient(0, 0, 256, 1);

  for (let i = 0; i < tempInterpolateColor.length; i += 2) {
    const val = tempInterpolateColor[i];
    gradient.addColorStop((val - tempInterpolateColor[0]) / range, tempInterpolateColor[i + 1]);
  }

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 256, 1);

  // for (let i = 0; i < 256; i++) {
  //   const expression = expr.kind === 'constant' || expr.kind === 'source' ? {} : (typeof this.options.getZoom === 'function' ? {
  //     zoom: this.options.getZoom(),
  //   } : {});
  //   const color = expr.evaluate(expression, { properties: { value: (i / 255) * range } });
  //   colors[i * 4 + 0] = color.r * 255;
  //   colors[i * 4 + 1] = color.g * 255;
  //   colors[i * 4 + 2] = color.b * 255;
  //   colors[i * 4 + 3] = color.a * 255;
  // }

  const gr = document.createElement('canvas');
  gr.width = 16;
  gr.height = 16;

  const sx = Math.floor((data.min - tempInterpolateColor[0]) / range * 256);
  const mx = Math.floor((data.max - tempInterpolateColor[0]) / range * 256);

  const _data = ctx.getImageData(sx, 0, mx - sx, 1).data;

  const ctx_gr = gr.getContext('2d');

  ctx_gr && ctx_gr.putImageData(new ImageData(_data, 16, 16), 0, 0);
  document.body.appendChild(gr);
</script>
</body>
</html>
